<template>
  <div>
     <Nav></Nav>
    <Chart></Chart>
    <div class="primary_business">
      <p class="word_title">主营业务</p>
      <div class="show_pic">
        <div class="block" v-for="item in primarylist" :key="item.id">
          <!-- <span class="demonstration">{{ fit }}</span> -->
          <el-image
            style="width: 180px; height: 180px"
            :src="item.image"
            :onerror="defalutLogoUrl"
            fit="cover"
            @click="enterPrimary"
          >
          </el-image>
          <!-- <div class="bottom_title">{{fit}}</div> -->
          <span class="bottom_title">{{ item.title}}</span>
        </div>
      </div>

      <!--  主营业务卡片-->
      <div class="box_information">
        <el-card class="box-card">
          <el-row>
            <el-col :span="10">
              <el-image :src="aboutlist.img" class="primary_show"></el-image>
            </el-col>
            <el-col :span="14">
              <h3>{{aboutlist.companyName}}</h3>
              <p class="content">
                {{aboutlist.details}}
              </p>
              <el-button type="success" size="mini" class="learnBtn1" @click="enterAboutus"
                >了解更多</el-button
              >
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>

    <!--  -->
    <div class="icon_content"></div>

    <div class="nav_icon">
      <ul>
        <li v-for="item in iconlist" :key="item.id">
          <div class="icon_introduction">
            <el-image :src="item.img" class="icon_show_pic"></el-image>
            <p>{{ item.name }}</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="new_information">
      <el-card class="box-card" style="height:800px">
        <el-row>
          <el-col><p class="word_title">最新资讯</p></el-col>
          <el-col>
            <div class="show_news" v-for="(item,index) in messagelist"
             v-if="index < 4"  :key="item.id" @click="entryNextnews(item.id)">
              <el-row>
                <el-col :span="6">
                  <el-image :src="item.image" :onerror="defalutLogoUrl"></el-image>
                </el-col>
                <el-col :span="16">
                  <p class="new_word">{{ item.title }}</p>
                  <b class="new_time">发布时间：{{ item.pubdate}}</b>
                </el-col>
              </el-row>
            </div>
            <el-button
              type="success"
              size="mini"
              class="learnBtn"
              style="margin-left:20px"
              @click="entryMessage"
              >查看更多</el-button
            >
          </el-col>
          <el-col
            ><p class="word_title" style="margin-top:50px">新闻中心</p></el-col
          >
          <el-col>
            <div class="show_news" v-for="(item,index) in newlist"
             v-if="index < 4"  :key="item.id" @click="entryNextnews(item.id)">
              <el-row>
                <el-col :span="6">
                  <el-image :src="item.image" :onerror="defalutLogoUrl" ></el-image>
                </el-col>
                <el-col :span="16">
                  <p class="new_word">{{ item.title }}</p>
                  <b class="new_time">发布时间：{{ item.pubdate }}</b>
                </el-col>
              </el-row>
            </div>
            <el-button
              type="success"
              size="mini"
              class="learnBtn"
              style="margin-left:20px;"
              @click="entryNews"
              >查看更多</el-button
            >
          </el-col>
        </el-row>
      </el-card>
    </div>
    <el-footer>
        <el-row >
                <el-col :span="5" style="margin-left:-720px">
                    <p>东莞XXXXXXX有限公司</p>
                    <ul style="list-style-type:none">
                        <li><i class="el-icon-location-information"></i> 广东省广州市从化区</li>
                        <li><i class="el-icon-user"></i> 13800138000</li>
                        <li><i class="el-icon-message"></i> 13800138000@163.com</li>
                    </ul>
                </el-col>
                <el-col :span="5" style="margin-left:-450px;">
                    <img src="../../assets/img/top.png" style="width:100px;height:100px;margin-top:20px">
                </el-col>
                <el-col :span="10" style="margin-left:-160px;">
                    <pre class="left_title">首页  /  主营业务  /  关于我们  /  行业资讯  /  新闻中心  /  联系我们 </pre>
                    <pre>AAA 2021 东莞市XXXXXXX有限公司   丨    技术支持：广州嘉预网络科技有限公司</pre>
                </el-col>
            </el-row>
        </el-footer>
    </el-footer>

  </div>
</template>
<script>
import Nav from '../../components/Nav/Nav.vue'
import Chart from '../../components/Chart/Chart.vue'


export default {
  components: {
      Nav,
      Chart,

  },
  data() {
    return {
      defalutLogoUrl:'this.src="'+  require("../../assets/img/5.jpg")  +'"',
      //  require('@/assets/1.png') { id: 0, idView: require("../../assets/img/5.jpg") },
      iconlist: [
        {
          id: "0",
          img: require("../../assets/img/icon/4.png"),
          name: "质量为主",
        },
        {
          id: "1",
          img: require("../../assets/img/icon/3.png"),
          name: "诚信经营",
        },
        {
          id: "2",
          img: require("../../assets/img/icon/2.png"),
          name: "互惠互利",
        },
        {
          id: "3",
          img: require("../../assets/img/icon/1.png"),
          name: "共同发展",
        },
        {
          id: "4",
          img: require("../../assets/img/icon/5.png"),
          name: "联系方式",
        },
      ],

      centerlist: [
        {
          id: "0",
          img: require("../../assets/img/5.jpg"),
          name: "东莞吊车租赁公司如何选择吊车出租公司与操作",
          time: "2021年6月5日",
        },
        {
          id: "1",
          img: require("../../assets/img/6.jpg"),
          name: "诚信经营",
          time: "2021年6月2日",
        },
        {
          id: "2",
          img: require("../../assets/img/7.jpg"),
          name: "互惠互利",
          time: "2021年6月3日",
        },
        {
          id: "3",
          img: require("../../assets/img/8.jpg"),
          name: "东莞吊车租赁公司如何选择吊车出租公司与操作",
          time: "2021年6月4日",
        },
      ],
      list:"",
      // 关于我们
       aboutInfo: {
        about: "",
      },
      // 关于我们
      aboutlist: [],
      // 主营业务
      primarylist:[],
      // 最新资讯
      messagelist:[],
      // 新闻中心
      newInfo: {
        total: 5,
        list: "",
      },
      pagination: {
        pagenum: 1,
        pagesize: 5,
        total: 7,
      },
      newlist: [],
    };
  },
  methods: {
    enterPrimary() {
      this.$router.push("/primary");
    },
      // 关于我们
    async getAbout() {
      const res = await this.http.post("/about/show", this.aboutInfo);
      this.aboutlist = res.about;
      console.log(res);
    },
    enterAboutus(){
      this.$router.push("/about");
    },
    // 主营业务
    async getPrimary(){
      const res = await this.http.get("/business/select")
      this.primarylist = res.list
      console.log(this.primarylist);
    },
    // 最新资讯
    async getMessageList(){
      const res = await this.http.get('/message/selectAll')
      this.messagelist = res.list
    },
    entryMessage(){
      this.$router.push('/message')
    },
    // 新闻中心
    entryNews(){
        this.$router.push("/news");
    },
    async getNewList() {
      const res = await this.http.get("/news/select", this.pagination);
      this.newlist = res.list;
      this.pagination.total = res.total;
    },
    //  监听pagesize的改变
    handleSizeChange(newSize) {
      this.pagination.pagesize = newSize;
      this.getNewList();
    },
    handleCurrentChange(newPage) {
      this.pagination.pagenum = newPage;
      this.getNewList();
    },
   entryNextnews(id){
     console.log(id);
     this.$router.push({
       path:'/next',
       query:{id:id}
     })
   }
    
  },
  created() {
    // 关于我们
      this.getAbout();
      // 主营业务
       this.getPrimary();
      //  最新资讯
      this.getMessageList();
      // 新闻中心
      this.getNewList();
  },
};
</script>

<style scoped>
.primary_business {
  /* background: #f3f3f3; */
  width: 100%;
  height: 1800px;
  text-align: center;
  padding-top: 20px;
}
.word_title {
  /* background: yellow; */
  display: inline-block;
  padding: 0 20px;
  border-left: 5px solid rgba(5, 160, 69, 1);
  font-size: 18px;
  font-weight: 400px;
  /* text-align: center; */
}
.show_pic {
  width: 780px;
  height: 400px;
  /* background: pink; */
  margin: 0 auto;
  padding-left: 5px;
}
.block {
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  position: relative;
}

.bottom_title {
  position: absolute;
  bottom: 20px;
  left: 10px;
  color: #fff;
  border-bottom: 3px solid #fff;
  width: 100px;
  text-align: left;
  /* background: pink; */
}
/* card */
.text {
  font-size: 14px;
}
.item {
  padding: 18px 0;
}
/*  */
.nav_icon {
  margin: 0 auto;
}
.box_information {
  position: relative;
  top: 100px;
  left: 300px;
}
.box-card {
  width: 780px;
  height: 350px;
  margin: 0 auto;
  /* background: pink; */
  z-index: 1;
  position: absolute;
}

.primary_show {
  width: 300px;
  height: 300px;
}
.box_information .content {
  margin-left: 25px;
  width: 400px;
  height: 180px;
  /* background: yellow; */
  text-align: left;
  font-size: 12px;
  letter-spacing: 4px;
  line-height: 22px;
}
.el-button {
  width: 200px;
  margin-top: 20px;
  margin-left: -180px;
}
/* 背景 */
.icon_content {
  width: 100%;
  height: 400px;
  /* background: pink; */
  position: relative;
  top: -900px;

  background: url("../../assets/img/banner/3.jpg") no-repeat center/cover;
}
/*  */
.new_information ul {
  margin-left: 260px;
}
.nav_icon ul  {
  position: relative;
  list-style-type: none;
  z-index: 1;
}
.nav_icon  li {
  width: 120px;
  height: 120px;
  background: #fff;
  float: left;
  margin-left: 50px;
  border-radius: 5%;
  /* position: absolute; */
  position: relative;
  top: -1200px;
  left: 260px;
}
.icon_show_pic {
  width: 50px;
  height: 50px;
  /* background:yellow; */
  position: relative;
  margin-top: 20px;
  margin-left: 36px;
}
.icon_introduction p {
  display: block;
  text-align: center;
  font-size: 12px;
}
.new_information {
  position: relative;
  top: -940px;
  left: 310px;
  bottom: 0;
}
.new_information {
  text-align: center;
}
.show_news {
  width: 320px;
  height: 120px;
  /* background: pink; */
  border-bottom: 2px solid #ededed;
  color: #333;
  float: left;
  margin-left: 50px;
}
.show_news .el-image {
  margin-top: 20px;
  margin-left: 5px;
  height: 80px;
  width: 80px;
}
.new_word {
  font-size: 14px;
  text-align: left;
  margin-left: 20px;
}
.new_time {
  display: block;
  font-size: 10px;
  margin-top: 40px;
  margin-left: -20px;
}
.learnBtn1{
  position: relative;
  left: 80px;
}
.el-footer{
    background: #343434;
    height: 200px !important;
    color: #fff;
    margin: 0 auto;
    font-size: 16px;
    padding-top: 40px;
    position: relative;
    z-index: 10000;
}
.el-footer ul{
    margin-left: -42px;
}
.el-footer ul li{
    font-size: 12px;
    margin-bottom: 10px;
    font-weight: 200;
    color: rgb(216, 214, 214);
}
.left_title{
    font-size: 12px;
    font-weight: bold;
}
pre{
    font-size: 8px;
     color: rgb(216, 214, 214);
     margin-top: 40px;
}
/*  */

</style>
